import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from "@angular/core";
import {CommService} from "../comm-service";
import {SharedService} from "../shared-service";
import {MyhttpService} from "../myhttp.service";

declare var $: any;

@Component({
  template: `
    <div class="clxx comp" [style.width]="compw" [style.height]="comph" [style.top]="topv"
         [style.left]="leftv">
      <div class="content">
        <div class="title">
          <div class="title_text">车辆实时情况{{comptitle}}</div>
        </div>
        <div class="body">
          <div class="clxxroom iecrollkf chromescrollkf">
            <table class="table table-bordered table-striped">
              <thead>
              <tr>
                <th style="width: 180px;">上报时间</th>
                <th>详情</th>
              </tr>
              </thead>
              <tbody *ngIf="clssqkList.length">
              <tr *ngFor="let item of clssqkList">
                <td>{{item.sbsj}}</td>
                <td>{{item.xq}}</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: [
    ".clxx{position:absolute;background-color:#fff;border:5px solid #ccc;}",
    ".content{width: calc(100%);height: calc(100%);}",
    ".content>.title{position: relative;width: 100%;height: auto;padding: 10px; border-bottom: 1px solid #ccc; color: rgb(138 143 151);}",
    ".title>.title_text{height: 15px;line-height: 15px;font-size: 15px;  width: auto;border-left: 5px solid #1477F3;padding-left: 10px}",
    ".content>.body{position: relative;width: 100%;height: calc(100% - 24px);padding: 10px 10px}",
    ".clxxroom{width: calc(100% - 17px);height: 283px;overflow-y: auto}"
  ]
})
export class YwclClxxComponent implements OnInit, OnDestroy {
  compw: string = "0px";
  comph: string = "0px";
  topv: string = "0px";
  leftv: string = "0px";
  comptitle: string = "";
  frompage: string;
  s_zdid: string = "";
  clssqkList: any[] = [];


  getData(): void {
    if (!this.s_zdid) {
      return;
    }
    const url = "sjgz/zsymyycl/sjyyclrz";
    this.itservice.kwPtPost(url, {
      sbid: this.s_zdid
    }).subscribe(resp => {
      this.commservice.handResponse("get", url, resp, (arg1, resp, arg2) => {
        if (arg1) {
          if (arg2) {
            const sjyyclrzListv = resp.sjyyclrzList ? resp.sjyyclrzList : [];
            if (!sjyyclrzListv.length) {
              this.clssqkList.length = 0;
              return
            }
            this.clssqkList = sjyyclrzListv.map((obj) => {
              const sjv = obj.sj; // 时间
              const sfzhdzv = obj.sfzhdz; // 是否转换地址：0 不转；1 转
              const rznrv = obj.rznr;  // 日志内容（如果地址需要转换，此值是停留的分钟数）
              const jdv = obj.jd; //经度
              const wdv = obj.wd; //维度
              const obj_new = {
                sbsj: sjv,
                xq: ""
              };
              if (sfzhdzv === "0") {
                obj_new["xq"] = rznrv;
              } else if (sfzhdzv === "1") {
                this.getAddresss(`${jdv},${wdv}`, (addresss) => {
                  obj_new["xq"] = `在【${addresss}】停留${rznrv}分钟`
                });
              }
              return obj_new;
            });
          }
        }
      });
    });
  }

  getAddresss(lnglatXY: string, callback: Function): void {
    const url = "https://restapi.amap.com/v3/geocode/regeo";
    $.get(url, {
      "key": "88e07dad205561a18c71a32db17fe1bc",
      "location": lnglatXY,
    }, (resp) => {
      const info = resp.info;
      if (info == "OK") {
        const regeocode = resp.regeocode;
        if (regeocode) {
          callback(regeocode.formatted_address);
        } else {
          callback("")
        }
      } else {
        callback("");
      }
    });
  }

  /**
   * 组件在 显示面板中的位置+ 大小
   */
  initcompPositionSize_ctrshow(): void {
    // 位置 大小
    this.compw = this.o.compw + "px";
    this.comph = this.o.comph + "px";
    this.topv = this.o.topv + "px";
    this.leftv = this.o.leftv + "px";
    // 显示
    this.frompage = this.o.frompage;
    if (this.frompage === "ywcl") {
      this.s_zdid = "";
      this.getData();
    }
  }

  @Input() o: any;
  @Output() outhander: EventEmitter<any> = new EventEmitter();

  constructor(private commservice: CommService,
              private itservice: MyhttpService,
              private sharedService: SharedService) {
    this.sharedService.changeEmitted$.subscribe(resp => {
      const actiontype = resp.actiontype;
      const data = resp.data;
      if (actiontype == "toggleActiveZd") {
        const activeZdobj = data.activezdobj;
        const ssbqidxxv = data.ssbqidxx;  //实时扫描到的标签id集合
        if (activeZdobj) {
          this.comptitle = `(${activeZdobj.zdmc})`;
          this.s_zdid = activeZdobj.id;
          this.getData();
        }
      }
    });

  }

  ngOnInit() {
    this.commservice.log("-- 【 compkey=clxx】--被父组件动态加载init....", this.o);
    this.initcompPositionSize_ctrshow();
  }

  ngOnDestroy() {

  }

}
